@font-face {
	font-family: 'title';
	src: url('~@/assets/fonts/AlimamaShuHeiTi-Bold.TTF') format('truetype');
	font-weight: normal;
	font-style: normal;
}
/*通用 */
view{
	font-size:28rpx; 
	font-family: 'title', Sans-serif;
	color: #F0FDFF;
}
image{
	vertical-align: bottom;
}

.text-color-b{
	background: -webkit-linear-gradient(bottom,var(--color), #fff);
	-webkit-background-clip: text;
	color: transparent;
}
.text-color-t{
	background: -webkit-linear-gradient(top,var(--color), #fff);
	-webkit-background-clip: text;
	color: transparent;
}
.text-color-l{
	background: -webkit-linear-gradient(left,var(--color), #fff);
	-webkit-background-clip: text;
	color: transparent;
}
.text-color-r{
	background: -webkit-linear-gradient(right,var(--color), #fff);
	-webkit-background-clip: text;
	color: transparent;
}
.w-fit{
	width: fit-content;
}
.h-fit{
	height: fit-content;
}
// flex布局
.f{display: flex;}
.fr{display: flex;flex-direction: row;}
.fr-ac{display: flex;flex-direction:row;align-items: center;}
.fr-as{display: flex;flex-direction: row;align-items: flex-start;}
.fr-ae{display: flex;flex-direction: row;align-items: flex-end;}
.fr-js{display: flex;flex-direction: row;justify-content: flex-start;}
.fr-jc{display: flex;flex-direction: row;justify-content: center;}
.fr-je{display: flex;flex-direction: row;justify-content: flex-end;}
.fr-jsb{display: flex;flex-direction: row;justify-content: space-between;}
.fr-jsa{display: flex;flex-direction: row;justify-content: space-around;}
.fr-ac-jsb{display: flex;flex-direction: row;align-items: center;justify-content: space-between;}
.fr-ac-jsa{display: flex;flex-direction: row;align-items: center;justify-content: space-around;}
.fr-ae-jsb{display: flex;flex-direction: row;align-items: flex-end;justify-content: space-between;}
.fr-ac-jc{display: flex;flex-direction: row;align-items: center;justify-content: center;}
.fr-as-jsb{display: flex;flex-direction: row;align-items: flex-start;justify-content: space-between;}

.fc{display: flex;flex-direction: column;}
.fc-ac{display: flex;flex-direction: column;align-items: center;}
.fc-ae{display: flex;flex-direction: column;align-items: flex-end;}
.fc-jc{display: flex;flex-direction: column;justify-content: center;}
.fc-js{display: flex;flex-direction: column;justify-content: flex-start;}
.fc-as{display: flex;flex-direction: column;align-items: flex-start;}
.fc-jsa{display: flex;flex-direction: column;justify-content: space-around;}
.fc-jsb{display: flex;flex-direction: column;justify-content: space-between;}
.fc-ac-jc{display: flex;flex-direction: column;align-items: center;justify-content: center;}
.fc-ac-jsb{display: flex;flex-direction:column;align-items: center;justify-content: space-between;}
.fc-ac-jsa{display: flex;flex-direction:column;align-items: center;justify-content: space-around;}
.fc-ae-jsb{display: flex;flex-direction:column;align-items: flex-end;justify-content: space-between;}
.fc-as-jsa{display: flex;flex-direction:column;align-items: flex-start;justify-content: space-around;}
.fc-as-jsb{display: flex;flex-direction:column;align-items: flex-start;justify-content: space-between;}
.fc-as-jc{display: flex;flex-direction:column;align-items: flex-start;justify-content: center;}
.frw{display: flex;flex-direction: row;flex-wrap: wrap;}
.fw{display: flex;flex-wrap: wrap;}
.fw-fc{display: flex;flex-wrap: wrap;justify-content:center;}
.fw-fs{display: flex;flex-wrap: wrap;justify-content:flex-start;}
.fw-sb{display: flex;flex-wrap: wrap;justify-content:space-between;}
.fw-jc-ac{display: flex;flex-wrap: wrap;justify-content:center;align-items: center;}

//粗细
.bold{font-weight: bold;}

//行高默认
.lh-n{
	line-height: normal;
}

// 边距填充
.mt-auto{
	margin-top: auto;
}
.mb-auto{
	margin-bottom: auto;
}
.ml-auto{
	margin-left: auto;
}
.mr-auto{
	margin-right: auto;
}

/* 文字排版 */
.t-c{
	text-align: center;
}
.t-l{
	text-align: left;
}
.t-r{
	text-align: right;
}
/* 块元素居中 */
.block-c{
	display: block;
	margin: 0 auto;
}
/* //定位 */
.pos-f{position: fixed;}
.pos-a{position: absolute;}
.pos-r{position: relative;}


$fillet-max: 201;
// 圆角
@for $i from 0 to $fillet-max {
  .br-#{$i} {
	border-radius:#{$i}rpx;
  }
}
$percent-max: 101;
//宽度百分比
@for $i from 0 to $percent-max {
  .w-#{$i} {
	width:$i+0%;
  }
}
//高度百分比
@for $i from 0 to $percent-max {
  .h-#{$i} {
	height:$i+0%;
  }
}

// 弹性布局占比
$flex-max: 11;
@for $i from 0 to $flex-max {
  .flex-#{$i} {
	flex:#{$i};
  }
}

//透明度
@for $i from 0 to $percent-max {
  .op-#{$i} {
	opacity:$i+0%;
  }
}

//间距gap
@for $i from 0 to $percent-max {
  .gap-#{$i} {
	gap:#{$i}rpx;
  }
}

// 超出行省略
$ellipsis-max: 11;
@for $i from 0 to $ellipsis-max {
  .ellipsis-#{$i} {
	word-break: break-all;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: #{$i}; /* 这里是超出几行省略 */
	overflow: hidden;
  }
}

// 字号
$max: 101;

@for $i from 0 to $max {
  .fs-#{$i} {
    font-size: #{$i}rpx;
  }
}
// 边距
@for $i from 0 to $max {
  .ma-#{$i} {
    margin: #{$i}rpx;
  }
}
 
@for $i from 0 to $max {
  .mx-#{$i} {
    margin-left: #{$i}rpx;
    margin-right: #{$i}rpx;
  }
}
 
@for $i from 0 to $max {
  .my-#{$i} {
    margin-top: #{$i}rpx;
    margin-bottom: #{$i}rpx;
  }
}
 
@for $i from 0 to $max {
  .mt-#{$i} {
    margin-top: #{$i}rpx;
  }
}
 
@for $i from 0 to $max {
  .mb-#{$i} {
    margin-bottom: #{$i}rpx;
  }
}
 
@for $i from 0 to $max {
  .ml-#{$i} {
    margin-left: #{$i}rpx;
  }
}
 
@for $i from 0 to $max {
  .mr-#{$i} {
    margin-right: #{$i}rpx;
  }
}
 
@for $i from 0 to $max {
  .pa-#{$i} {
    box-sizing: border-box;
    padding: #{$i}rpx;
  }
}
 
@for $i from 0 to $max {
  .px-#{$i} {
    box-sizing: border-box;
    padding-left: #{$i}rpx;
    padding-right: #{$i}rpx;
  }
}
 
@for $i from 0 to $max {
  .py-#{$i} {
    padding-top: #{$i}rpx;
    padding-bottom: #{$i}rpx;
  }
}
 
@for $i from 0 to $max {
  .pt-#{$i} {
    padding-top: #{$i}rpx;
  }
}
 
@for $i from 0 to $max {
  .pl-#{$i} {
    box-sizing: border-box;
    padding-left: #{$i}rpx;
  }
}

@for $i from 0 to $max {
  .pr-#{$i} {
    box-sizing: border-box;
    padding-right: #{$i}rpx;
  }
}
 
@for $i from 0 to $max {
  .pb-#{$i} {
    padding-bottom: #{$i}rpx;
  }
}